<template>
    <div class="footer">
        <Header/>
<<<<<<< HEAD
        <h1>这是用户信息页</h1>
=======
        <h1>这是个人中心页</h1>
>>>>>>> c08a2c9afaf2d3b270a8ee3abf17b8f918215c8e
        <el-container style="height: 1000px; border: 1px solid #eee">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu :default-openeds="['1', '3']">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-menu"></i>我的订单</template>
                        <el-menu-item index="1-1" @click="goPage('/order_manage')"
                                      :class="{active: url_path === '/order_manage'}">订单管理
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-menu"></i>我的资产</template>
                        <el-menu-item index="2-1" @click="goPage('/money')"
<<<<<<< HEAD
                                      :class="{active: url_path === '/money'}">账户余额
                        </el-menu-item>
                        <el-menu-item index="2-2" @click="goPage('/score')"
                                      :class="{active: url_path === '/score'}">我的积分
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-setting"></i>个人中心</template>
                        <el-menu-item index="3-1" @click="goPage('/self_center')"
                                      :class="{active: url_path === '/self_center'}">用户信息
                        </el-menu-item>
                        <el-menu-item index="3-2" @click="goPage('/receipt')"
                                      :class="{active: url_path === '/receipt'}">我的发票
                        </el-menu-item>
                        <el-menu-item index="3-3" @click="goPage('/traffic')"
                                      :class="{active: url_path === '/traffic'}">我的违章
                        </el-menu-item>
                        <el-menu-item index="3-4" @click="goPage('/complain')"
                                      :class="{active: url_path === '/complain'}">在线投诉
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main width="1000px" style="background-color: rgb(246, 241, 239)">
                <img :src="user_info.icon" alt="">
                <div class="user_info" v-for="(k,v) in user_info" v-if="v !== 'icon'">
                    <h3>{{ v }}:{{ k }}</h3>
                </div>
                <el-button type="text" @click="dialog = true">修改密码</el-button>
                <el-drawer
                        title="修改密码"
                        :visible.sync="dialog"
                        direction="ltr"
                        custom-class="demo-drawer"
                        ref="drawer"
                >
                    <div class="demo-drawer__content">
                        <el-form :model="form">
                            <el-form-item label="安全问题" :label-width="formLabelWidth">
                                <el-select v-model="form.region" placeholder="请选择问题">
                                    <el-option v-for="question in question_info" :label="question.title"
                                               v-model="question.title"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="答案是" :label-width="formLabelWidth">
                                <el-input v-model="form.answer" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="原密码" :label-width="formLabelWidth">
                                <el-input v-model="form.old_pwd" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="新密码" :label-width="formLabelWidth">
                                <el-input v-model="form.new_pwd" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码" :label-width="formLabelWidth">
                                <el-input v-model="form.c_pwd" autocomplete="off"></el-input>
                            </el-form-item>
                            <span v-for="question in question_info"
                                  v-if="form.region === question.title && form.answer ===question.answer"
                                  style="color: green">输入正确</span>
                        </el-form>
                        <div class="demo-drawer__footer">
                            <el-button @click="cancelForm">取 消</el-button>
                            <el-button type="primary" @click="check_password">确定
                            </el-button>
                        </div>
                    </div>
                </el-drawer>
                <hr>
                <el-button type="text" @click="dialog1 = true">新增安全问题</el-button>
                <el-drawer
                        title="新增安全问题"
                        :visible.sync="dialog1"
                        direction="ltr"
                        custom-class="demo-drawer"
                        ref="drawer"
                >
                    <div class="demo-drawer__content">
                        <el-form :model="form">
                            <el-form-item label="问题名称" :label-width="formLabelWidth">
                                <el-input v-model="form.title" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="问题答案" :label-width="formLabelWidth">
                                <el-input v-model="form.q_answer" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div class="demo-drawer__footer">
                            <el-button @click="cancelForm">取 消</el-button>
                            <el-button type="primary" @click="add_question">确定
                            </el-button>
                        </div>
                    </div>
                </el-drawer>
            </el-main>
=======
                                      :class="{active: url_path === '/money'}">账户余额</el-menu-item>
                        <el-menu-item index="2-2" @click="goPage('/score')"
                                      :class="{active: url_path === '/score'}">我的积分</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-setting"></i>个人中心</template>
                        <el-menu-item index="3-1" @click="goPage('/user_info')"
                                      :class="{active: url_path === '/user_info'}">用户信息</el-menu-item>
                        <el-menu-item index="3-2" @click="goPage('/receipt')"
                                      :class="{active: url_path === '/receipt'}">我的发票</el-menu-item>
                        <el-menu-item index="3-3" @click="goPage('/traffic')"
                                      :class="{active: url_path === '/traffic'}">我的违章</el-menu-item>
                        <el-menu-item index="3-4" @click="goPage('/complain')"
                                      :class="{active: url_path === '/complain'}">在线投诉</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
>>>>>>> c08a2c9afaf2d3b270a8ee3abf17b8f918215c8e
        </el-container>
        <Footer/>
    </div>

</template>

<script>
    import Header from "../components/Header";
    import Footer from "../components/Footer";

    export default {
        name: "self_center",
<<<<<<< HEAD
        components: {Footer, Header},
        data() {
            return {
                url_path: sessionStorage.url_path || '/',
                user_info: {}, //用户信息，
                table: false,
                dialog: false,
                dialog1: false,
                loading: false,
                question_info: [],
                form: {
                    answer: '',
                    region: '',
                    old_pwd: '',
                    new_pwd: '',
                    c_pwd: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',
                    title: '',
                    q_answer: '',
                },
                formLabelWidth: '80px',
                timer: null,
            }
        },
        watch: {
            // "form.answer": function () {
            //     this.check_password()
            // },
            // "form.region": function () {
            //     this.check_password()
            // },
            // "form.old_pwd": function () {
            //     this.check_password()
            // },
            // "form.new_pwd": function () {
            //     this.check_password()
            // },
            // "form_c_pwd": function () {
            //     this.check_password()
            // }

        },
        methods: {
            // 修改密码
            check_password() {
                for ( var i=0; i < this.question_info.length; i ++) {
                    // console.log(this.question_info[i].title);
                    // console.log(this.form.region);
                    // console.log(this.form.answer);
                    // console.log(this.question_info[i].answer);
                    if (this.form.region === this.question_info[i].title ) {
                        // let alter = {
                        //     old_pwd: this.form.old_pwd,
                        //     pwd: this.form.new_pwd,
                        //     re_pwd: this.form.c_pwd,
                        //     id: this.$cookies.get("user_id")
                        //
                        // };
                        if (this.form.answer === this.question_info[i].answer){
                        this.$axios.put(`${this.$settings.base_url}/user/alter_pwd`, {
                            old_pwd: this.form.old_pwd,
                            pwd: this.form.new_pwd,
                            re_pwd: this.form.c_pwd,
                            id: this.$cookies.get("user_id")
                        }).then(response => {
                            this.$message({
                                message: response.data
                            })
                        }).catch(error => {
                            this.$message({
                                message: error.response.data
                            })
                        })
                        }
                        else {
                        this.$message({
                            message: "答案错误，请重新输入"
                        });
                    }
                    }

                }
            },
            add_question() {
                this.$axios({
                    url: `${this.$settings.base_url}/user/add_question`,
                    method: 'post',
                    data: {
                        user_id: this.$cookies.get('user_id'),
                        title: this.form.title,
                        answer: this.form.q_answer,
                    }
                }).then(response => {
                    this.$message({
                        message: response.data
                    });
                }).catch( error =>{
                    this.$message({
                        message: error.response.data
                    })
                })
            },
=======
        components: { Footer, Header},
        data() {
            return {
                url_path: sessionStorage.url_path || '/',
            }
        },
        methods: {
>>>>>>> c08a2c9afaf2d3b270a8ee3abf17b8f918215c8e
            goPage(url_path) {
                //已经是当前路由就没有必要重新跳转
                if (this.url_path !== url_path) {
                    this.$router.push(url_path);
                }
<<<<<<< HEAD
                sessionStorage.url_path = url_path;

            },
            // handleClose(done) {
            //     if (this.loading) {
            //         return;
            //     }
            //     this.$confirm('确定要提交表单吗？')
            //         .then(_ => {
            //             this.loading = true;
            //             this.timer = setTimeout(() => {
            //                 done();
            //                 // 动画关闭需要一定的时间
            //                 setTimeout(() => {
            //                     this.loading = false;
            //                 }, 400);
            //             }, 2000);
            //         })
            //         .catch(_ => {
            //         });
            // },
            cancelForm() {
                this.loading = false;
                this.dialog = false;
                clearTimeout(this.timer);
            }
        }
        ,
        created() {
            this.$axios.get(`${this.$settings.base_url}/user/user_info/${this.$cookies.get('user_id')}`, {}).then(response => {
                console.log(response.data);
                this.user_info = response.data;
            }).catch(() => {
                this.$message({
                    message: "获取用户信息有误，请联系客服工作人员"
                })
            });
            this.$axios.get(`${this.$settings.base_url}/user/questions?user_id=${this.$cookies.get('user_id')}`, {}).then(response => {
                console.log(response.data);
                this.question_info = response.data;
            }).catch(() => {
                this.$message({
                    message: "获取用户问题数据有误，请联系客服工作人员"
                });
            });
            sessionStorage.url_path = this.$route.path;
            this.url_path = this.$route.path;

=======
                sessionStorage.url_path = url_path
            },
        },
        created() {
            sessionStorage.url_path = this.$route.path;
            this.url_path = this.$route.path;
>>>>>>> c08a2c9afaf2d3b270a8ee3abf17b8f918215c8e
        }
    }
</script>

<style scoped>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }
</style>